<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta charset="utf-8" />
		
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<style type="text/css">
			.my-navbar {
				padding: 20px 0;
				transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
			}

			nav ul:first-child a,
			.navbar-brand {
				background: transparent !important;
				color: #fff
			}

			.my-navbar a:hover {
				color: #45bcf9 !important;
				background: transparent;
				outline: 0
			}

			.my-navbar a {
				transition: color 0.5s ease-in-out;
			}

			/*-webkit-transition ;-moz-transition*/
			.top-nav {
				padding: 0;
				background: #000;
			}

			button.navbar-toggle {
				background-color: #fbfbfb;
			}

			/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/
			button.navbar-toggle>span.icon-bar {
				background-color: #dedede
			}

			.navbar {
				padding-left: 40px;
			}

			.dropdown-toggle,
			.glyphicon-off {
				color: white;
				font-size: 15px;
			}

			/* .dropdown {
				margin-left: 600px;
			} */

			.dropdown-toggle:hover {
				color: white;
			}

			.alert-warning {
				height: 130px;
				margin-top: 20px;
			}

			.btn-danger,
			.btn-default {
				width: 100px;
			}

			.page-header {
				margin-top: 0px;
				padding: 0;
			}

			.page-header h1 {
				padding: 0;
				margin-top: 0;
				font-size: 16px;
			}

			.search {
				border: 1px solid #000;
				border-top: none;
				padding: 10px;
			}

			.nav-tabs a {
				border-bottom: none;
			}
			.pull-left{
				margin-right: 30px;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-fixed-top my-navbar top-nav" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

						<span class="glyphicon glyphicon-list"></span>

					</button>
					<a class="navbar-brand" href="#">重庆工程学院</a>
				</div>
				<div class="collapse navbar-collapse" id="example-navbar-collapse">
					<ul class="nav navbar-nav" style="padding:-10px;">
						<li class=""><a href="index.html" class="glyphicon glyphicon-home">&nbsp后台首页</a></li>
						<li><a href="usermanage.html" class="glyphicon glyphicon-user">&nbsp用户管理</a></li>
						<li><a href="contentmanage.html" class="glyphicon glyphicon-list-alt">&nbsp内容管理</a></li>
						<li><a href="#" class="glyphicon glyphicon-tags" style="color: #45bcf9">&nbsp便签的管理</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right" style="padding-right: 60px ;padding-top: 10px;">
						<div class="dropdown">
							<span class="btn dropdown-toggle" data-toggle="dropdown">
								管理员
								<span class="caret"></span>
							</span>
							<ul class="dropdown-menu">
								<li>
									<a href="#" class="glyphicon glyphicon-home">&nbsp;前台首页</a>
								</li>
								<li>
									<a href="personalpage.html" class="glyphicon glyphicon-user">&nbsp;个人主页</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-cog">&nbsp;个人设置</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-credit-card">&nbsp;账户中心</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-heart">&nbsp;我的收藏</a>
								</li>
								

							</ul>
							<li class="glyphicon glyphicon-off"><a href="" style="color: white;">退出</a></li>

					</ul>
				</div>
			</div>
		</nav>
		<div class="container">
			<div class="row">
				<ul class="col-md-12">
					<div class="page-header">
						<h1>TAG标签管理</h1>
					</div>
					
						<div class="col-md-9">
							<div class="form-group">
								<input type="text" id="tag" value="" placeholder="请输入要添加的标签" class="form-control username" />
								
							</div>
							</div>
							<div class="col-md-3">
								<button type="button" class="btn btn-default add" style="height: 40px;width: 60px;">添加</button>
							</div>
							
						<div class="col-md-12 tagtotal">
							
						</div>
						</div>
						
						
					</ul>
					
					</div>



					
					
				</div>
				
			</div>
		</div>
		


		<footer>
			<div class="row">
				<div class="col-md-12 text-center navbar-static-bottom"  style="margin-top: 30PX;">
					Copyright @ 2019-2020

				</div>
			</div>
		</footer>
	</body>
</html>
<script type="text/javascript">
	var onResize = function() {
		// apply dynamic padding at the top of the body according to the fixed navbar height
		$("body").css("padding-top", $(".navbar-fixed-top").height() * 1.5);
	};

	// attach the function to the window resize event
	$(window).resize(onResize);

	// call it also when the page is ready after load or reload
	$(function() {
		onResize();
	});


	function ajax() {
		$.ajax({
			type: "get", //发送请求的类型post，get
			dataType: "json", //默认是text
			url: `http://127.0.0.1:7300/mock/5ee96c5cc5fadd342c8a0931/totalData/getTag`, //发送的地址
			success: function(msg) { //成功的回调
			let data=msg.data
			data.forEach(item=>{
				$('.tagtotal').append(`<div class="alert alert-info pull-left" style="width: 150px;height: 80px;">
					<a href="#" class="close" data-dismiss="alert">
						&times;
					</a>
					${item.tag}
				</div>`)
			})

$('.add').click(function(){
	let tagtext=$('#tag').val()
	$('.tagtotal').append(`<div class="alert alert-info pull-left" style="width: 150px;height: 80px;">
					<a href="#" class="close" data-dismiss="alert">
						&times;
					</a>
					${tagtext}
				</div>`)
})
			},//成功的回掉









			error: function(error) {
				console.log(error.responseText);
			}
		});
	}


	ajax();
	
	
</script>
